<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .score-case {
        width: 1000px;
        margin: 50px auto;
        display: flex;
      }
      .score-case .table {
        flex: 4;
      }
      .score-case .table table {
        width: 100%;
        border-spacing: 0;
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
      }
      .score-case .table table th {
        background: #f5f5f5;
      }
      .score-case .table table tr:hover td {
        background: #f5f5f5;
      }
      .score-case .table table td,
      .score-case .table table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        text-align: center;
        padding: 10px;
      }
      .score-case .table table td.red,
      .score-case .table table th.red {
        color: red;
      }
      .score-case .table .none {
        height: 100px;
        line-height: 100px;
        color: #999;
      }
      .score-case .form {
        flex: 1;
        padding: 20px;
      }
      .score-case .form .form-item {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
      }
      .score-case .form .form-item .label {
        width: 60px;
        text-align: right;
        font-size: 14px;
      }
      .score-case .form .form-item .input {
        flex: 1;
      }
      .score-case .form .form-item input,
      .score-case .form .form-item select {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        width: 200px;
        height: 40px;
        box-sizing: border-box;
        padding: 10px;
        color: #666;
      }
      .score-case .form .form-item input::placeholder {
        color: #666;
      }
      .score-case .form .form-item .cancel,
      .score-case .form .form-item .submit {
        appearance: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 4px 10px;
        margin-right: 10px;
        font-size: 12px;
        background: #ccc;
      }
      .score-case .form .form-item .submit {
        border-color: #069;
        background: #069;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="score-case">
        <div class="table">
          <table>
            <thead>
              <tr>
                <th>编号</th>
                <th>科目</th>
                <th>成绩</th>
                <th>考试时间</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in list" :key="item.id">
                <td>{{index+1}}</td>
                <td>{{item.subject}}</td>
                <td :class="{red:item.score<60}">{{item.score}}</td>
                <td>{{item.date | newTime}}</td>
                <!-- <td><a href="#" @click.prevent="del(index)">删除</a></td> -->
                <td><a href="#" @click.prevent="del2(item.id)">删除</a></td>
              </tr>
            </tbody>
            <!-- <tbody >
                    <tr>
                      <td colspan="5">
                        <span class="none">暂无数据</span>
                      </td>
                    </tr>
                  </tbody> -->
            <tfoot>
              <tr>
                <td colspan="5">
                  <span>总分：{{total}}</span>
                  <span style="margin-left:50px">平均分：{{average}}</span>
                </td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="form">
          <div class="form-item">
            <div class="label">科目：</div>
            <div class="input">
              <input
                v-model.trim="subject"
                type="text"
                placeholder="请输入科目"
              />
            </div>
          </div>
          <div class="form-item">
            <div class="label">分数：</div>
            <div class="input">
              <input
                v-model.trim="score"
                type="text"
                placeholder="请输入分数"
              />
            </div>
          </div>
          <div class="form-item">
            <div class="label"></div>
            <div class="input">
              <button class="submit" @click="add">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
    <script>
      new Vue({
        el: '#app',

        data: {
          list: [
            {
              id: 15,
              subject: '语文',
              score: 89,
              date: new Date('2022/06/07 10:00:00')
            },
            {
              id: 27,
              subject: '数学',
              score: 100,
              date: new Date('2022/06/07 15:00:00')
            },
            {
              id: 32,
              subject: '英语',
              score: 56,
              date: new Date('2022/06/08 10:00:00')
            },
            {
              id: 41,
              subject: '物理',
              score: 76,
              date: new Date('2022/06/08 10:00:00')
            }
          ],
          subject: '',
          score: ''
        },
        computed: {
          total () {
            return this.list.reduce((prev, item) => {
              return prev + item.score
            }, 0)
          },
          average () {
            return (this.total / this.list.length).toFixed(2)
          }
        },
        filters: {
          newTime (str) {
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        watch: {
          //   average (newVal) {
          //     if (newVal < 70) {
          //       alert('平均分低于了70')
          //     }
          //   }
          average: {
            handler (newVal) {
              console.log('average')
              if (newVal < 70) {
                alert('平均分低于了70')
              }
            },
            immediate: true
          }
        },
        methods: {
          add () {
            if (this.subject.length > 0 && this.score !== '') {
              this.list.push({
                id: Date.now(),
                subject: this.subject,
                score: +this.score,
                date: new Date()
              })
              this.subject = ''
              this.score = ''
            }
          },
          del (index) {
            this.list.splice(index, 1)
          },
          del2 (id) {
            this.list = this.list.filter(item => item.id !== id)
          }
        }
      })
    </script>
  </body>
</html>
